<template>
  <view>
    <!-- 自定义头部 -->
    <view class="profile-head-wind wd-cell"></view>
    <!-- 个人信息块 -->
    <view class="profile-user-info-box-wind wd-cell">
      <view class="user-info-top wd-cell__wrapper">
        <!-- 头像区域 -->
        <view class="avatar-box">
          <image class="avatar" :src="identityStore.getAvatar"></image>
          <view class="avatar-text">
            <view class="wd-cell__title" v-if="identityStore.isLogined">
              {{ identityStore.getUserInfo?.NickName ?? '' }}
            </view>
            <view class="wd-cell__label" v-if="identityStore.isLogined">
              {{ identityStore.getUserInfo?.UserName ?? '' }}
            </view>

            <wd-button type="text" @click="navigateToLogin()" v-if="!identityStore.isLogined">
              {{ t('common.unauthorized') }}
            </wd-button>
          </view>
        </view>
        <!-- 箭头设置 -->
        <view class="arrow-box">
          <view class="user-setting">
            <image src="@/static/images/icons/dashboard_grey@128x.png" />
          </view>
          <wd-icon name="arrow-right" custom-class="wd-cell__arrow-right" />
        </view>
      </view>
      <!-- 标签 -->
      <view class="user-status">
        <template v-for="(item, _idx) in identityStore.getUserInfo?.Tag" :key="_idx">
          <wd-tag plain custom-class="tag" :type="getRandomElement(tagTypes)">{{ item }}</wd-tag>
        </template>
      </view>
    </view>
    <wd-gap height="5"></wd-gap>
    <!-- 组织 -->
    <wd-cell
      :title="`${t('pages.sys.profile.organization.title')}${currentOrgInfo ? ` ： ${currentOrgInfo.Name}` : ''}`"
      is-link
      clickable
      size="large"
      center
      title-width="90%"
    >
      <template #icon>
        <image src="@/static/images/icons/organization@128x.png" class="profile-cell-icon-wind" />
      </template>
    </wd-cell>
    <wd-gap height="5"></wd-gap>
    <wd-cell-group border>
      <wd-cell
        v-if="ignoreEnvs(!isH5, ['development'])"
        :title="t('pages.sys.profile.printerText')"
        is-link
        clickable
        size="large"
        center
        title-width="90%"
      >
        <template #icon>
          <image src="@/static/images/icons/printer_blue@128x.png" class="profile-cell-icon-wind" />
        </template>
      </wd-cell>
      <wd-cell
        v-if="
          (ignoreEnvs(isH5, ['development']) && ignoreEnvs(webProxy !== 'true', ['development'])) ||
          ignoreEnvs(baseUrlSet !== 'true', ['development'])
        "
        :title="t('pages.sys.profile.connectionText')"
        is-link
        clickable
        :replace="false"
        to="/pages/sys/proxy/index"
        size="large"
        center
        title-width="90%"
      >
        <template #icon>
          <image
            src="@/static/images/icons/connect_network@128x.png"
            class="profile-cell-icon-wind"
          />
        </template>
      </wd-cell>
      <wd-cell
        v-if="ignoreEnvs(isApp, ['development'])"
        :title="t('pages.sys.profile.scanText')"
        is-link
        clickable
        size="large"
        center
        title-width="90%"
      >
        <template #icon>
          <image src="@/static/images/icons/scan_barcode@128x.png" class="profile-cell-icon-wind" />
        </template>
      </wd-cell>
    </wd-cell-group>
    <wd-gap height="5"></wd-gap>
    <wd-cell-group border>
      <ea-data-picker
        :columns="localeLangs"
        v-model="localeLang"
        @confirm="handleLangConfirm"
        :z-index="999"
        :reverse-select="false"
        :multiple-select="false"
        popup-height="calc(100vh)"
        :title="t('layout.language.setLang')"
        use-default-slot
      >
        <wd-cell
          :title="`${t('layout.language.title')} ： ${localInfo?.text}`"
          is-link
          clickable
          size="large"
          center
          title-width="90%"
        >
          <template #icon>
            <image
              :src="themeStore.getCurrentTheme === 'dark' ? langDarkImg : langImg"
              class="profile-cell-icon-wind"
            />
          </template>
        </wd-cell>
      </ea-data-picker>
      <ea-picker
        :columns="themeStore.getThemeList"
        v-model="currTheme"
        @confirm="handleThemeConfirm"
        use-default-slot
      >
        <wd-cell
          :title="t('layout.theme.title')"
          is-link
          clickable
          size="large"
          center
          title-width="90%"
        >
          <template #icon>
            <image
              src="@/static/images/icons/wizard_purple@128x.png"
              class="profile-cell-icon-wind"
            />
          </template>
        </wd-cell>
      </ea-picker>
      <ea-picker
        :columns="skinStore.getClassList"
        v-model="currSkin"
        @confirm="handleSkinConfirm"
        use-default-slot
      >
        <wd-cell
          :title="t('layout.skin.title')"
          is-link
          clickable
          size="large"
          center
          title-width="90%"
        >
          <template #icon>
            <image
              src="@/static/images/icons/design_geometry@128x.png"
              class="profile-cell-icon-wind"
            />
          </template>
        </wd-cell>
      </ea-picker>
      <ea-picker
        :columns="skinStore.getThemeColorList"
        v-model="currThemeColor"
        @confirm="handleThemeColorConfirm"
        use-default-slot
      >
        <wd-cell
          :title="t('layout.skin.style.themeColor.title')"
          is-link
          clickable
          size="large"
          center
          title-width="90%"
        >
          <template #icon>
            <image
              src="@/static/images/icons/design_palette@128x.png"
              class="profile-cell-icon-wind"
            />
          </template>
        </wd-cell>
      </ea-picker>
    </wd-cell-group>
    <wd-gap height="5"></wd-gap>
    <wd-cell-group border>
      <wd-cell
        v-if="ignoreEnvs(isApp, ['development'])"
        :title="t('pages.sys.profile.upgradeCheckText')"
        is-link
        clickable
        size="large"
        center
        title-width="90%"
        @click="() => upgrader.check()"
      >
        <template #icon>
          <image
            src="@/static/images/icons/upgrade_download@128x.png"
            class="profile-cell-icon-wind"
          />
        </template>
      </wd-cell>
      <navigator url="/pages/sys/about/index" open-type="navigate">
        <wd-cell
          :title="t('pages.sys.profile.aboutText')"
          is-link
          clickable
          size="large"
          center
          title-width="90%"
        >
          <template #icon>
            <image
              src="@/static/images/icons/lifebelt_help@128x.png"
              class="profile-cell-icon-wind"
            />
          </template>
        </wd-cell>
      </navigator>
    </wd-cell-group>
  </view>
</template>

<script lang="ts" setup>
  import './index.scss';

  import { EaDataPicker } from '@/components/ea-data-picker';
  import { useNavbar } from '@/components/ea-navbar';
  import { EaPicker } from '@/components/ea-picker';
  import { useUpgrader } from '@/components/ea-upgrader';
  import { useMessage } from '@/hooks/useMessage';
  import { useI18n } from '@/locale/index';
  import { useLocale } from '@/locale/useLocale';
  import { localeList } from '@/settings/localeSetting';
  import langImg from '@/static/images/icons/language_letter@128x.png';
  import langDarkImg from '@/static/images/icons/language_translate@128x.png';
  import { useIdentityStore } from '@/store/modules/identity';
  import { useSkinStore } from '@/store/modules/skin';
  import { useThemeStore } from '@/store/modules/theme';
  import { getRandomElement } from '@/utils';
  import { navigateToLogin } from '@/utils/go';
  import { ignoreEnvs, isApp, isH5 } from '@/utils/platform';

  const tagTypes = ref<Array<'default' | 'primary' | 'danger' | 'warning' | 'success'>>([
    'default',
    'primary',
    'danger',
    'warning',
    'success',
  ]);

  const webProxy = ref(__VITE_WEB_PROXY__);
  const baseUrlSet = ref(__VITE_BASEURL_SET__);

  const { t } = useI18n();
  const localeStore = useLocale();
  const { changeLocale } = localeStore;
  const identityStore = useIdentityStore();
  const themeStore = useThemeStore();
  const skinStore = useSkinStore();
  const navbar = useNavbar(null, 'HOME');
  const { modal } = useMessage();
  const upgrader = useUpgrader();

  /** 当前组织机构信息 */
  const currentOrgInfo = computed(() => {
    const userInfo = identityStore.getUserInfo;
    if (!userInfo) {
      return null;
    }
    const currentOrganization = userInfo.CurrentOrganization;
    const currentDepartment = userInfo.CurrentDepartment;
    if (!currentOrganization && !currentDepartment) {
      return null;
    }

    const organizationId = currentDepartment
      ? currentDepartment.Id
      : currentOrganization
        ? currentOrganization.Id
        : 0;
    let organizationName = '';
    if (currentOrganization) {
      organizationName = currentOrganization.Name
        ? currentOrganization.Name
        : currentOrganization.Id;
    }
    if (currentDepartment) {
      organizationName = `${organizationName} - ${currentDepartment.Name ? currentDepartment.Name : currentDepartment.Id}`;
    }
    return { Id: organizationId, Name: organizationName };
  });

  /** 语言列表 */
  const localeLangs = computed(() =>
    localeList.map((o) => {
      return {
        icon: o.icon,
        value: o.code,
        label: o.text,
        disabled: false,
      };
    }),
  );
  /** 当前语言对象 */
  const localInfo = computed(() => localeStore.localInfo?.value);
  /** 当前语言值 */
  const localeLang = ref(localInfo?.value?.code);
  /** 处理语言确认 */
  function handleLangConfirm({ value }) {
    localeLang.value = value;
    if (localInfo.value?.code !== value) {
      changeLocale(value);
    }
  }

  /** 当前主题 */
  const currTheme = ref(themeStore.getTheme);
  /** 处理主题确认 */
  function handleThemeConfirm({ value }) {
    themeStore.setTheme(value);
    currTheme.value = themeStore.getTheme;
  }

  /** 当前皮肤 */
  const currSkin = ref(skinStore.getClass);
  /** 处理皮肤确认 */
  function handleSkinConfirm({ value }) {
    skinStore.setClass(value);
    currSkin.value = skinStore.getClass;
  }

  /** 当前主题色 */
  const currThemeColor = ref(skinStore.getCurrentThemeColor?.value ?? 'default');
  /** 处理主题色确认 */
  function handleThemeColorConfirm({ selectedItems }) {
    modal
      .confirm({
        title: t('common.warmReminder'),
        content: t(
          'layout.theme.applyTheme',
          `${t('layout.skin.style.themeColor.title')}『${selectedItems.label}』`,
        ),
        confirmText: t('layout.theme.currTheme'),
        cancelText: t('layout.theme.allTheme'),
        // cancelColor: selectedItems?.color,
        zIndex: 999999999,
      })
      .then(() => {
        skinStore.setThemeColor(selectedItems.color, 'current');
      })
      .catch(() => {
        skinStore.setThemeColor(selectedItems.color, 'all');
      })
      .finally(() => {
        currThemeColor.value = skinStore.getCurrentThemeColor?.value ?? 'default';
        modal.close();
      });
  }

  watch(
    () => skinStore.getCurrentThemeColor,
    (_v) => {
      currThemeColor.value = skinStore.getCurrentThemeColor?.value ?? 'default';
    },
  );

  onMounted(() => {
    navbar.set({ customClass: 'ea-navbar-profile-wind', bordered: false });
  });
  onUnmounted(() => {
    navbar.clearCustomClass();
    navbar.clearBordered();
  });
</script>

<style lang="scss" scoped>
  @import './index';
</style>
